﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IList<Sisocana.Core.Models.AffectedAreaMarker>>" %>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">    
    <script type="text/javascript">    
        $(document).ready(function () {
            initMap('map');
        });
        $(function () {
            var areaName = $("#area_name");
            var areaInfo = $("#area_info");
            var allFields = $([]).add(areaName).add(areaInfo);
            var tips = $(".validateTips");

            function updateTips(t) {
                tips.text(t).addClass("ui-state-highlight");
                setTimeout(function () { tips.removeClass("ui-state-highlight", 1500); }, 500);
            }

            function checkLength(o, n, min, max) {
                if (o.val().length > max || o.val().length < min) {
                    o.addClass("ui-state-error");
                    updateTips("Length of " + n + " must be between " +
				    min + " and " + max + ".");
                    return false;
                } else {
                    return true;
                }
            }

            function newAffectedArea() {
                var latlng = googleMap.getCenter();
                var thisMarkerId = addMarker(areaName.val(), areaInfo.val(), latlng.lat(), latlng.lng(), true);

                return "<input type='hidden' value='0' name='" + thisMarkerId + ".AreaId'/>" +
                       "<input type='hidden' value='" + areaName.val() + "' name='" + thisMarkerId + ".AreaName'/>" +
                       "<input type='hidden' value='" + areaInfo.val() + "' name='" + thisMarkerId + ".AreaInfo'/>" +
                       "<input type='hidden' value='" + latlng.lat() + "' name='" + thisMarkerId + ".Latitude'/>" +
                       "<input type='hidden' value='" + latlng.lng() + "' name='" + thisMarkerId + ".Longitude'/>" +
                       "<input type='hidden' value='add' name='" + thisMarkerId + ".Action'/>";
            }

            function removeSelectedArea() {
                if (currentMarker != null) {
                    var thisMarkerId = currentMarker.markerId;
                    var currentMarkerAction = document.getElementsByName(thisMarkerId + '.Action')[0];
                    if (currentMarkerAction.value == "add") {
                        currentMarkerAction.value = "none";
                    } else {
                        currentMarkerAction.value = "remove";
                    }
                    markerArray[thisMarkerId].setMap(null);
                    markerArray[thisMarkerId] = null;
                    currentMarker = null;
                }
            }

            $("#add_marker-form").dialog({
                autoOpen: false,
                height: 370,
                width: 320,
                modal: true,
                buttons: {
                    Add: function () {
                        allFields.removeClass("ui-state-error");
                        if (checkLength(areaName, "area name", 3, 50) && checkLength(areaInfo, "area description", 6, 250)) {
                            $("#aaMarkers").append(newAffectedArea());
                            $(this).dialog("close");
                        }
                    },
                    Cancel: function () {
                        $(this).dialog("close");
                    }
                },
                open: function(){ tips.text("Name and description required"); },
                close: function () {
                    allFields.val("").removeClass("ui-state-error");
                    tips.text("");
                }
            });

            $("#add-marker").button().click(function () { $("#add_marker-form").dialog("open"); });
            $("#remove-marker").button().click(function () { removeSelectedArea(); });
            $("#submitChanges").button();
            $("#discardChanges").button().click(function () { window.location.href = "/SisocanaBackEnd/Site/Conf?idsitio=<%= ViewBag.idSitio %>&tab=1" });
        });
	</script>
    <h2>Affected areas</h2>
    
    <div id='map' style="display:block; width:600px; height:350px;"></div>
    <br />
    <button id="add-marker">Add a new marker</button>
    <button id="remove-marker">Remove selected marker</button>   
    <%= Html.Hidden("map_marker_amount", Model.Count()) %>
    <% Html.BeginForm("AffectedAreas", "Site", FormMethod.Post); %> 
        <br />
        <button id="submitChanges" type="submit" value="Save changes">Save changes</button>
        <button id="discardChanges" type="button" value="Discard changes">Discard changes</button>
        <%= Html.Hidden("idSitio", (int) ViewBag.idSitio) %>
        <div id="aaMarkers">
            <%= Html.DisplayForModel() %>
        </div>
    <% Html.EndForm(); %>
    
    <div id="add_marker-form" title="Add a new marker">
        <p class="validateTips"></p>
	    <fieldset style="border-style:none; padding: 0;">
		    <label for="area_name">Area name</label>
		    <input id="area_name" name="area_name" type="text" class="text ui-widget-content ui-corner-all" />
		    <label for="area_info">Area description</label>
            <textarea id="area_info" name="area_info" rows="2" cols="20" class="text ui-widget-content ui-corner-all"></textarea>
	    </fieldset>	    
    </div>
</asp:Content>


<asp:Content ID="Content3" ContentPlaceHolderID="HeaderContent" runat="server">
<script src="<%: Url.Content("~/Scripts/jquery.validate.min.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/jquery-ui-1.8.11.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/multiplemarkersmap.js") %>" type="text/javascript"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<link href="<%: Url.Content("~/Content/themes/base/jquery.ui.all.css") %>" rel="stylesheet" type="text/css" />
<link href="<%: Url.Content("~/Content/themes/base/jquery.ui.theme.css") %>" rel="stylesheet" type="text/css" />
<link href="<%: Url.Content("~/Content/dialog.css") %>" rel="stylesheet" type="text/css" />
</asp:Content>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Affected areas
</asp:Content>